import Cookie from 'js-cookie'
export default{
    namespaced:true,
    state:{
        isCollapse:false,  //控制菜单的展开和收起
        tabsList:[
            {
                path:'/',
                name:'home',
                label:'首页',
                icon:'s-home',
                url:'Home/Home'
            },
        ], //面包屑数据
        menu:[]
    },
    mutations:{
        collapseMenu(state){
            state.isCollapse = !state.isCollapse
        },
        // 更新面包屑数据
        selectMenu(state,val){
            // 判断添加的数据是否为首页(不为首页则添加上去)
            if (val.name !== 'home') {
                const index = state.tabsList.findIndex(item =>item.name === val.name)  //判断添加的数据是否存在
                if (index === -1) {
                    state.tabsList.push(val)
                }
            }
        },
        // 删除指定的tag数据
        closeTag(state,item){
            const index = state.tabsList.findIndex(val=>val.name === item.name)
            state.tabsList.splice(index,1)
        },
        setMenu(state,val){
            state.menu = val
            // 因为cookie的对象必须是字符串，所以调用JSON.stringify()方法
            Cookie.set('menu',JSON.stringify(val))
        },
        // 动态注册路由
        addMenu(state,router){
            // 判断缓存中是否有数据
            if (!Cookie.get('menu')) return
            const menu = JSON.parse(Cookie.get('menu'))
            state.menu = menu //
            // 组装动态路由的数据
            const menuArray = []
            menu.forEach(item => {  //若有children，则对有children的部分进行动态组装路由
                if (item.children) {
                    item.children =  item.children.map(item=>{
                        item.component=()=>import(`../views/${item.url}`)
                        return item
                    })
                    menuArray.push(...item.children)
                }else{   //若没有children，则对没有children的部分进行动态组装路由
                    item.component=()=>import(`../views/${item.url}`)
                    menuArray.push(item)
                }
            });
            console.log(menuArray,'1222')
            // 添加动态路由
            menuArray.forEach((item)=>{
                router.addRoute('Main',item)
            })
        }
    }
}

// findIndex方法：找到数组符合条件的第一个值，返回第一个值的索引，若没有符合条件的返回-1

/*
 静态路由:
已经确定了路由的数量(一般是侧边栏的路由)，最开始可以把路由表配置好
如果后期有权限的情况的下，也可以只展示对应的菜单，使用路由懒加载的话，没有对应菜单的路由就不会渲染
但是这样做就会存在一个问题，用户通过地址栏输入路由路径，也可以访问到对应页面

 动态路由:
为了解决静态路由所带来的问题，动态路由是当前用户拥有哪些访问的权限才添加对应的路由
登录的时候，在路由前置守卫中通过 token 来获取该用户存在哪些权限，在依次添加
详情设置看CSDN
*/